<template>
  <div class="CodeMirror_wrapper">
    <codemirror
      ref="chartOption"
      :value="mirrorCode"
      :options="cmOptions"
      @change="mirrorCodeChange"
    >
    </codemirror>
  </div>
</template>

<script>
import { codemirror } from "vue-codemirror"; // 引入组件
import "codemirror/lib/codemirror.css";
import "codemirror/theme/base16-light.css";
import "codemirror/mode/javascript/javascript.js"; //
export default {
  name: "basic-line-configs",
  components: {
    codemirror, // 声明组件
  },
  data() {
    return {
      mirrorCode: "",
      cmOptions: {
        tabSize: 2, // Tab键空格数
        mode: "application/json", //模式
        theme: "base16-light", // 主题
        lineNumbers: true, //是否显示行号
        line: true,
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.CodeMirror_wrapper {
  width: 500px;
  height: 300px;
  overflow: scroll;
  margin-top: 200px;
  margin-left: 500px;
}
.CodeMirror {
  border: 1px solid #eee;
  height: auto;
}
.CodeMirror-scroll {
  height: auto;
  overflow-y: hidden;
  overflow-x: auto;
}
</style>

